<script setup lang="ts">
  import { ref } from 'vue'
  import uploadImg from '@/assets/image/avatar_upload_default.png'
  import { FormInstance, UploadFile, UploadRawFile } from 'element-plus'
  import { HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'
  import { deleteFile, networkFileUpload } from '@/api/upload'

  defineOptions({
    name: 'FinancialInfoNetworkCreate',
  })

  // 表单
  const form = ref({
    bandName: '',
    bandNo: '',
    businessLicenseImage: '',
    businessLicenseNo: '',
    cardholderName: '',
    settlementType: 1,
  })

  // 表单组件实例
  const formInstance = ref<FormInstance | null>(null)

  // 图片文件
  const imgFile = ref<{ url: string; file: UploadRawFile } | null>(null)

  // 图片删除列表
  const imgDelUrls = ref<Array<string>>([])

  /**
   * 营业执照上传事件
   * @param {Object} uploadFile - 上传的文件
   */
  const handleUploadImg = (uploadFile: UploadFile) => {
    if (!uploadFile.raw.type.includes('image')) {
      HMessageBox.error(infoTip.network.create.imgTypeFail)
      return
    }

    imgFile.value = {
      url: URL.createObjectURL(uploadFile.raw),
      file: uploadFile.raw,
    }
  }

  /**
   * 删除图片
   */
  const onDelImg = () => {
    imgFile.value = null
    imgDelUrls.value.push(form.value.businessLicenseImage)
    form.value.businessLicenseImage = ''
  }

  defineExpose({
    getForm: async () => {
      if (imgFile.value) {
        await deleteFile(imgDelUrls.value)
        const files = await networkFileUpload([imgFile.value.file])
        form.value.businessLicenseImage = files.data.data.rows[0]
      }
      return form.value
    },
    setForm: (_form: typeof form.value) => {
      form.value = { ..._form }
    },
  })
</script>

<template>
  <div class="network-create-financial-info">
    <div class="title">财务信息</div>
    <el-form ref="formInstance" :model="form" label-width="84" inline-message>
      <el-form-item label="银行名称" prop="bandName">
        <el-input
          v-model.trim="form.bandName"
          placeholder="请输入银行名称"
          maxlength="20"
        ></el-input>
      </el-form-item>
      <el-form-item label="银行卡号" prop="bandNo">
        <el-input
          v-model.trim="form.bandNo"
          placeholder="请输入银行卡号"
          maxlength="60"
          @input="form.bandNo = form.bandNo.replace(/[^\d]/g, '')"
        ></el-input>
      </el-form-item>
      <el-form-item label="持卡人姓名" prop="cardholderName">
        <el-input
          v-model.trim="form.cardholderName"
          placeholder="请输入持卡人姓名"
          maxlength="100"
        ></el-input>
      </el-form-item>
      <el-form-item label="结算方式" prop="settlementType">
        <el-radio-group v-model="form.settlementType">
          <el-radio :value="1" size="small">月结</el-radio>
          <el-radio :value="2" size="small">单付</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="营业执照图片" prop="businessImages">
        <div class="business-images-wrapper">
          <el-upload
            v-if="!imgFile && !form.businessLicenseImage"
            accept="image/*"
            class="img-upload"
            :auto-upload="false"
            :show-file-list="false"
            multiple
            :on-change="handleUploadImg"
          >
            <el-icon :size="24" color="#007cff">
              <UploadFilled />
            </el-icon>
          </el-upload>
          <h-image
            v-else
            :width="80"
            :height="50"
            :padding="2"
            :src="form.businessLicenseImage || (imgFile ? imgFile.url : '')"
            @del="onDelImg"
          ></h-image>
        </div>
      </el-form-item>
      <el-form-item label="营业执照号" prop="businessLicenseNo">
        <el-input
          v-model.trim="form.businessLicenseNo"
          placeholder="请输入营业执照号"
          maxlength="60"
          @input="form.businessLicenseNo = form.businessLicenseNo.replace(/[^a-zA-Z0-9]/g, '')"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
  @import './index.scss';
</style>
